<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>添加或编辑界面</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
    <script type="text/javascript" src="${s.base}/lib/echarts/echarts-all.js"></script>
    <style>
        .w440{
            width: 440px !important;
        }
    </style>
</head>
<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form" action="">
            <div class="wxyy-title-left clearfix">
                <span>统计分析</span>
            </div>
            <div class="layui-row layui-col-space30">
                <div class="wxyy-count-title"><span>${enrollmentRelease.name}</span>分析</div>
                <div class="layui-col-md7 ">
                   <div class="wxyy-tab-list-tit mart0">报名生源分析</div>
                    <div id="syfx" style="height:400px;"></div>
                </div>
                <div class="layui-col-md5" >
                    <div class="wxyy-tab-list-tit mart0">男女对比分析</div>
                    <div id="sexfx" style="height:400px;"></div>
                </div>
            </div>
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md7" >
                    <div class="wxyy-tab-list-tit mart0">学员地域</div>
                    <div id="xydy" style="height:400px;"></div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['jquery', 'form', 'page', 'dialog', 'laydate', 'fileUtil', 'baseutil'], function () {
        var $ = layui.jquery,
            form = layui.form,
            page = layui.page,
            dialog = layui.dialog,
            laydate = layui.laydate,
            fileUtil = layui.fileUtil,
            baseutil = layui.baseutil;
        syfxChat();
        sexChat();
        xydyChat();
    });

    function syfxChat() {
        var myChart = echarts.init(document.getElementById('syfx'));
        var data=new Array;
        // 指定图表的配置项和数据
        var option = {

            title: {
                text: ''
            },
            grid:{
                x:45,
                y:45,
                x2:5,
                y2:30,
                borderWidth:1
            },
            tooltip: {},
            legend: {
                data:['报名数']
            },
            xAxis: {
                data: '${schoolName}'.split(",")
            },
            yAxis: {},
            series: [{
                name: '报名数',
                type: 'bar',
                data: '${schoolNum}'.split(","),
                itemStyle:{
                    normal:{
                        color:'#5383f9'
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
    // 男女对比分析
    function sexChat(){
        var myChart = echarts.init(document.getElementById('sexfx'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['男','女']
            },
            color : [ '#53dcf9', '#f99153', '#f96353', 'green', 'blue', 'indigo', 'purple' ],
            series: [
                {
                    name:'对比分析',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:'${boy}', name:'男'},
                        {value:'${girl}', name:'女'},
                    ]
                }
            ]
        };
        myChart.setOption(option);
    }
    // 学院地域分析
    function xydyChat(){
        var myChart = echarts.init(document.getElementById('xydy'));

        // 指定图表的配置项和数据
        var option = {

            title: {
                text: ''
            },
            grid:{
                x:45,
                y:45,
                x2:5,
                y2:30,
                borderWidth:1
            },
            tooltip: {},
            legend: {
                data:['报名数']
            },
            xAxis: {
                data:'${schoolPlaceName}'.split(",")
            },
            yAxis: {},
            series: [{
                name: '报名数',
                type: 'bar',
                data: '${schoolPlaceNum}'.split(","),
                itemStyle:{
                    normal:{
                        color:'#53bcf9'
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
</script>
</body>
</html>